<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: black;
    }
    #container{
        display: flex;
        margin-top: 100px;
        gap: 20px;
        opacity: 0;
    }
    #container .container-item{
        width: 100px;
        height: 500px;
        background-color: #f5f5f5;
        transition:all .5s;
        overflow: hidden;
        text-align: center;
        border-radius: 10px;
    }
    #container .container-item img{
        height: 100%;
        filter: grayscale(100%);
    }
    .uni_xiaoqi{
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        position: absolute;
        color:white;
    }
</style>
<body>
    <div class="uni_xiaoqi">
        稍等 我亲爱的小琪...
    </div>
    <div id="container">
        <div class="container-item">
            <img src="img_xiao/img1.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img2.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img3.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img4.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img5.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img6.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img7.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img8.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img9.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img10.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img11.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img12.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img13.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img14.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img15.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img1.jpg">
        </div>
        <div class="container-item">
            <img src="img_xiao/img16.jpg" id="img">
        </div>
    </div>
</body>
</html>
<script>
    var items = document.querySelectorAll(".container-item")
    var container = document.getElementById("container")
    var Dom = ""
    function movefeng(){
        container.addEventListener("mouseleave",function(){
            init()
        })
    }
    function feng(){
        for(var i =0;i<items.length;i++){
            items[i].addEventListener("mouseenter",function(e){
                var prevElements = []
                var nextElements = []
                //初始化
                init()
                var prev = e.target.previousElementSibling
                var next = e.target.nextElementSibling
                prevElements.unshift(e.target)
                e.target.style.transform = "scale(1.2)"
                e.target.style.cursor = "pointer"
                e.target.children[0].style.filter = "grayscale(0%)"
                Dom = e.target
                //点击放大事件
                feng_C()
                for(var i = 0;i <= 1; i++) {
                    if(prev){
                        prevElements.push(prev)
                        prev = prev.previousElementSibling //若当prev为null的时候 则退出
                    }
                }
                prevElements.forEach((item,index)=>{
                    pilic(item,index)
                })
                nextElements.push(e.target)
                for(var i = 0;i <= 1; i++) {
                    if(next){
                        nextElements.push(next)
                        next = next.nextElementSibling
                    }
                }
                nextElements.forEach((item,index)=>{
                    pilic(item,index)
                })
            })
            
        }
    }


    function pilic(item,index){
        item.style.backgroundColor = "blue"
        if(index == 1){
            item.style.transform = "scale(1.1)"
        }
        item.children[0].style.filter = "grayscale(0%)"
    }


    function feng_C(){
        Dom.addEventListener("click",function(e){
            var img = new Image()
            img.src = Dom.children[0].src
            Dom.style.width = img.width + "px"
            Dom.children[0].style.width = "100%"
            Dom.style.transform = "scale(1)"
        })
    }


    function init(){
        items.forEach((item,index)=>{
            item.style.width = "100px"
            item.style.backgroundColor = "#f5f5f5"
            item.style.transform = "scale(1)"
            item.children[0].style.width = "auto"
            item.children[0].style.filter = "grayscale(100%)"
        })
    }


    //移除事件
    movefeng()
    //鼠标放入事件
    feng()
    //图片载入优化
    function onload_pic(){
        var imgdom = document.getElementById("img")
        var uni_xiaoqi = document.querySelector(".uni_xiaoqi")
        var img = new Image()
        img.onload = function(){
            uni_xiaoqi.style.opacity = "0"
            container.style.opacity = "1"
            uni_xiaoqi.style.transition = ".5s"
            container.style.transition = ".5s"
        }
        img.src = imgdom.src
    }
    onload_pic()
</script>